<template>
  <div class="container">
    <div class="title">总业绩</div>
    <div class="content">
        <div class="conList" v-for="(item, index) in data" :key="index">
            <div class="conName">
              <div> {{ item.goods.name }}</div>
              <div>委托代卖人： <span>{{ item.tousername }}</span></div>
            </div>
            <div class="conMouey">
              <div>￥ {{ item.price }}</div>
              <div>价格</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getUserTotal } from '../../api/api'
export default {
  data() {
    return {
      data: [],
    };
  },
  methods: {
    getInfo() {
      const data = {
        user_id: localStorage.getItem('userId')
      }
      getUserTotal(data).then(res => {
        this.$toast.clear()
        console.log('总业绩---', res)
        this.data = res.data
      })
    }
  },
  mounted() {
    this.getInfo()
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
}
.container {
  min-height: 100vh;
  background-color: #f1f1f1 !important;

  .title {
    width: 100%;
    height: 50px;
    background-color: #333333;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: 2px;
  }
  .content {
    padding: 0 3%;
    
    .conList {
        width: 100%;
        height: 110px;
        border-radius: 10px;
        margin-top: 20px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .conName {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-start;

          div:nth-child(1) {
            color: #333333;
            font-size: 18px;
          }

          div:last-child {
            margin-top: 10px;
            color: #999999;

            span {
              color: #333;
            }
          }
        }
        
        .conMouey {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-end;

          div:nth-child(1) {
            color: #DF0000;
            font-size: 18px;
          }

          div:last-child {
            margin-top: 10px;
            color: #999999;
          }
        }
    }
  }
}
</style>